<!DOCTYPE html>

<html xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core">


<h:head>

	<style type="text/css">
.content {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.ui-layout,.ui-layout-doc,.ui-layout-unit,.ui-layout-wrap,.ui-layout-bd,.ui-layout-hd
	{
	border: none;
}

.companyHeaderGrid tr,.companyHeaderGrid td {
	border: none;
}

.buy-btn,.ui-widget-content .buy-btn {
	-moz-box-shadow: inset 0px 1px 0px 0px #a4e271;
	-webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;
	box-shadow: inset 0px 1px 0px 0px #a4e271;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #89c403
		), color-stop(1, #77a809));
	background: -moz-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: -webkit-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: -o-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: -ms-linear-gradient(top, #89c403 5%, #77a809 100%);
	background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403',
		endColorstr='#77a809', GradientType=0);
	background-color: #89c403;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #74b807;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: arial;
	font-size: 14px;
	font-weight: bold;
	padding: 4px 15px;
	text-decoration: none;
	text-shadow: 0px 1px 0px #528009;
}

.buy-btn:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809
		), color-stop(1, #89c403));
	background: -moz-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: -webkit-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: -o-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: -ms-linear-gradient(top, #77a809 5%, #89c403 100%);
	background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809',
		endColorstr='#89c403', GradientType=0);
	background-color: #77a809;
}

.buy-btn:active {
	position: relative;
	top: 1px;
}

.price-txt {
	font-weight: 900;
	color: #f58220;
	text-decoration: none;
	background-color: #
}
</style>

</h:head>

<h:body>
	<img class="content" src="#{resource['images/top.jpg']}"
		alt="immagine top"></img>

	<!-- Importo il css per la customizzazione della pagina -->
	<h:outputStylesheet name="/css/custom.css" />


	<p:growl id="growl" for="growl-message" showDetail="true" sticky="true" />

	<p:layout fullPage="false" style=" min-width: 90%; height: 850px">

		<p:layoutUnit position="north"
			style="min-height:100px; font-size: 13pt">
			<p:toolbar>
				<p:toolbarGroup align="right">
					<h:form>
						<p:commandButton id="logoutButton" value="Logout"
							icon="ui-icon-play" action="#{logoutBean.logout()}" />
					</h:form>
				</p:toolbarGroup>
			</p:toolbar>
		</p:layoutUnit>


		<!-- START - ZONA SX DELLA PAGINA -->
		<p:layoutUnit position="west" collapsible="true" size="22%" gutter="0">

			<!-- Inserisco dal file left_menu (della cartella corrente) il menu con i comandi -->
			<ui:insert name="left-menu">
				<div style="padding: 0px 0px 0px 0px">
					<ui:include src="left_menu.xhtml" />
				</div>
			</ui:insert>

		</p:layoutUnit>
		<!-- STOP - ZONA SX DELLA PAGINA -->

		<!-- START - Dettagli del pacchetto -->
		<p:layoutUnit position="center"
			style="padding-left: 10px;margin-bottom: 0px" size="100%">



			<p:panelGrid columns="2" id="packet-detail-panel"
				styleClass="companyHeaderGrid" style="min-width: 100%;">


				<f:facet name="header" id="client-toolbar">


					<h:form>
						<div style="display: inline-block; float: left">

							<p:commandButton value="Indietro"
								oncomplete="window.history.back();" />

						</div>

						<p:outputLabel style="font-size: 13pt; float:center">
								Dettagli del pacchetto selezionato:
							</p:outputLabel>

						<div style="display: block; margin-top: 10px">
							<p:commandButton value="Acquista Pacchetto" styleClass="buy-btn"
								oncomplete="PF('delete_dialog').show();"/>
							<p:commandButton value="Personalizza Pacchetto"
								action="#{pacchettoBean.customPacchettoSelect()}" />
							<!-- aggiungi nella gift list -->
							<p:commandButton value="Aggiungi a GiftList"
								action="#{pacchettoBean.addToGiftList}" />

							<p:commandButton value="Invia invito" action="invia_invito" />
						</div>

					</h:form>

					<h:form>

						<!-- Dialog di acquisto del pacchetto, necessario per selezionare il numero di pacchetti -->
						<p:dialog header="Conferma l'acquisto e il numero dei pacchetti"
							widgetVar="delete_dialog" resizable="false" position="center"
							height="60px" width="300px">

							<h:form id="delete_form">

								<p:outputLabel value="Numero di pacchetti da acquistare: " />
								<p:inputText id="n" binding="#{numPack}"
									validator="#{validaBean.isIntegerGreaterThanZero}" />
								<p:message for="n" display="text" />

								<h:form>
									<p:commandButton value="Si" styleClass="buy-btn"
										oncomplete="PF('delete_dialog').hide();" update=":growl"
										action="#{pacchettoBean.compra_pacchetto(numPack.value)}" />
									<p:commandButton value="No" style="width: 70px; height: 35px"
										oncomplete="PF('delete_dialog').hide();" />
								</h:form>
							</h:form>
						</p:dialog>
						<!-- FINE - Dialog di acquisto -->
					</h:form>

				</f:facet>

				<h:outputText value="Citta: " />
				<p:outputLabel
					value="#{pacchettoBean.pacchettoSelezionato.citta.name}" />

				<h:outputText value="Data Partenza: " />
				<p:outputLabel
					value="#{pacchettoBean.pacchettoSelezionato.dataPartenzaAsString}" />

				<h:outputText value="Data Ritorno: " />
				<p:outputLabel
					value="#{pacchettoBean.pacchettoSelezionato.dataRitornoAsString}" />


				<h:outputText value="Numero persone per questo pacchetto: " />
				<h:outputText
					value="#{pacchettoBean.pacchettoSelezionato.tipoCameraAsInt}" />

				<h:outputText value="Prezzo Originale (TOTALE): " />
				<p:outputLabel style="text-decoration: line-through;"
					value="#{pacchettoBean.pacchettoSelezionato.prezzo}" />


				<h:outputText styleClass="price-txt" value="Offerta: " />
				<p:outputLabel styleClass="price-txt" style="font-size: 14pt"
					value="#{pacchettoBean.pacchettoSelezionato.prezzoScontato}" />

				<h:outputText value="Sconto: " />
				<p:outputLabel value="#{pacchettoBean.pacchettoSelezionato.sconto}" />

				<h:outputText value="Numero pacchetti Disponibili: " />
				<p:outputLabel
					value="#{pacchettoBean.pacchettoSelezionato.disponibilita}" />



				<h:outputText value="ID del pacchetto per la condividere: " />
				<p:outputLabel
					value="#{pacchettoBean.pacchettoSelezionato.clientIdPkg}" />

			</p:panelGrid>


			<p:panelGrid columns="4" id="alloggio-detail-panel"
				styleClass="companyHeaderGrid"
				style="min-width: 100%;margin-top: 35px">
				<f:facet name="header">
					Alloggio
				</f:facet>

				<h:outputText value="Soggiorno a: " />
				<h:outputText
					value="#{pacchettoBean.pacchettoSelezionato.alloggi.descrizione}"
					style="font-weight: bold" />

				<h:outputText value="Tipo Camera: " />
				<h:outputText
					value="#{pacchettoBean.pacchettoSelezionato.tipocamera}"
					style="font-weight: bold" />

				<h:outputText value="Prezzo camera al giorno: " />
				<h:outputText
					value="#{alloggioBean.disponibilitaForPacchettoSelezionato.prezzo}"
					style="font-weight: bold" />


			</p:panelGrid>



			<p:panelGrid columns="1" id="trasporti-detail-panel"
				styleClass="companyHeaderGrid"
				style="min-width: 100%;margin-top: 35px">

				<f:facet name="header">
					Trasporti per questo pacchetto.
				</f:facet>

				<p:accordionPanel multiple="true" value="Trasporto all'andata">
					<p:tab title="Dati Volo Andata">

						<h:panelGrid border="0" styleClass="companyHeaderGrid" columns="2"
							cellpadding="10">
							<h:outputText value="Da: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportAndata.cittaPartenza.name}"
								style="font-weight: bold" />

							<h:outputText value="A: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportAndata.cittaArrivo.name}"
								style="font-weight: bold" />

							<h:outputText value="Data: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportAndata.dataAsString}"
								style="font-weight: bold" />

							<h:outputText value="Prezzo per persona: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportAndata.prezzo}"
								style="font-weight: bold" />
						</h:panelGrid>
					</p:tab>

					<p:tab title="Dati Volo Ritorno">

						<h:panelGrid border="0" styleClass="companyHeaderGrid" columns="2"
							cellpadding="10">
							<h:outputText value="Da: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportRitorno.cittaPartenza.name}"
								style="font-weight: bold" />

							<h:outputText value="A: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportRitorno.cittaArrivo.name}"
								style="font-weight: bold" />

							<h:outputText value="Data: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportRitorno.dataAsString}"
								style="font-weight: bold" />

							<h:outputText value="Prezzo per persona: " />
							<h:outputText
								value="#{pacchettoBean.pacchettoSelezionato.trasportRitorno.prezzo}"
								style="font-weight: bold" />
						</h:panelGrid>
					</p:tab>
				</p:accordionPanel>

			</p:panelGrid>




			<p:panelGrid columns="1" id="escursioni-detail-panel"
				styleClass="companyHeaderGrid"
				style="min-width: 100%;margin-top: 35px">

				<f:facet name="header">
					Escursioni incluse nel pacchetto.
				</f:facet>

				<p:accordionPanel multiple="true"
					value="#{pacchettoBean.pacchettoSelezionato.escursionis}" var="e">
					<p:tab title="#{e.descrizione}">

						<h:panelGrid border="0" styleClass="companyHeaderGrid" columns="2"
							cellpadding="10">
							<h:outputText value="Name: " />
							<h:outputText value="#{e.descrizione}" style="font-weight: bold" />

							<h:outputText value="Citta: " />
							<h:outputText value="#{e.citta.name}" style="font-weight: bold" />

							<h:outputText value="Prezzo: " />
							<h:outputText value="#{e.prezzo}" style="font-weight: bold" />
						</h:panelGrid>

					</p:tab>

				</p:accordionPanel>


			</p:panelGrid>

		</p:layoutUnit>
		<!-- STOP - Dettagli del pacchetto -->








	</p:layout>
	<img class="content" src="#{resource['images/bottom.jpg']}"
		alt="immagine top"></img>

</h:body>
</html>